
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Recordset: Recordset Sort Plugin</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style type="text/css">
/* custom styles for this example */

#buttonControl input {
	margin: 3px 5px;
}
</style>
</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Recordset: Recordset Sort Plugin</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Recordset: Recordset Sort Plugin</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	The RecordsetSort plugin provides methods to allow for default and custom sorting on a recordset instance.	</div>

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="recordset_sort_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

	
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

	<!-- Working example code goes here -->
<div id="demo">
	<table>
		<thead>
			<tr>
				<th>State</th>
				<th>Population</th>
				<th>Land Area</th>
			</tr>
		<tbody>
		</tbody>
	</table>
</div>

<div id="buttonControl">
<input type="button" id="sortButton" href="sort.php" value="Sort Records by State">
<input type="button" id="shuffleButton" href="shuffle.php" value="Shuffle Everything up">
<br/>
<input type="button" id="resortButton" class="secondary" href="resort.php" value="Resort" disabled=true>
<input type="button" id="customButton" href="custom.php" value="Custom Sort by the sum of Population & Land Area">
<br/>
<input type="button" id="flipButton" class="secondary" href="flip.php" value="Flip Records" disabled=true>
<input type="button" id="reverseButton"  href="reverse.php" value="Reverse Records">
</div>
<script>
YUI({ filter: 'raw' }).use("recordset-base", "recordset-sort", "node", function (Y) {
	
	var state_census_data = [
        {ANSI: "01000", STATE: "ALABAMA", TOTAL_POP: 4708708, LAND_AREA: 50744, POP_PER_SQ_MILE: 87.6},
        {ANSI: "02000", STATE: "ALASKA", TOTAL_POP: 698473, LAND_AREA: 571951.26, POP_PER_SQ_MILE: 1.1},
        {ANSI: "04000", STATE: "ARIZONA", TOTAL_POP: 6595778, LAND_AREA: 113634.57, POP_PER_SQ_MILE: 45.2},
        {ANSI: "05000", STATE: "ARKANSAS", TOTAL_POP: 2889450, LAND_AREA: 52068.17, POP_PER_SQ_MILE: 51.3},
        {ANSI: "06000", STATE: "CALIFORNIA", TOTAL_POP: 36961664, LAND_AREA: 155959.34, POP_PER_SQ_MILE: 217.2},
        {ANSI: "08000", STATE: "COLORADO", TOTAL_POP: 5024748, LAND_AREA: 103717.53, POP_PER_SQ_MILE: 41.5},
        {ANSI: "09000", STATE: "CONNECTICUT", TOTAL_POP: 3518288, LAND_AREA: 4844.8, POP_PER_SQ_MILE: 702.9},
        {ANSI: "10000", STATE: "DELAWARE", TOTAL_POP: 885122, LAND_AREA: 1953.56, POP_PER_SQ_MILE: 401},
        {ANSI: "12000", STATE: "FLORIDA", TOTAL_POP: 18537969, LAND_AREA: 53926.82, POP_PER_SQ_MILE: 296.4},
        {ANSI: "13000", STATE: "GEORGIA", TOTAL_POP: 9829211, LAND_AREA: 57906.14, POP_PER_SQ_MILE: 141.4},
        {ANSI: "15000", STATE: "HAWAII", TOTAL_POP: 1295178, LAND_AREA: 6422.62, POP_PER_SQ_MILE: 188.6},
        {ANSI: "16000", STATE: "IDAHO", TOTAL_POP: 1545801, LAND_AREA: 82747.21, POP_PER_SQ_MILE: 15.6},
        {ANSI: "17000", STATE: "ILLINOIS", TOTAL_POP: 12910409, LAND_AREA: 55583.58, POP_PER_SQ_MILE: 223.4},
        {ANSI: "18000", STATE: "INDIANA", TOTAL_POP: 6423113, LAND_AREA: 35866.9, POP_PER_SQ_MILE: 169.5},
        {ANSI: "19000", STATE: "IOWA", TOTAL_POP: 3007856, LAND_AREA: 55869.36, POP_PER_SQ_MILE: 52.4},
        {ANSI: "20000", STATE: "KANSAS", TOTAL_POP: 2818747, LAND_AREA: 81814.88, POP_PER_SQ_MILE: 32.9},
        {ANSI: "21000", STATE: "KENTUCKY", TOTAL_POP: 4314113, LAND_AREA: 39728.18, POP_PER_SQ_MILE: 101.7},
        {ANSI: "22000", STATE: "LOUISIANA", TOTAL_POP: 4492076, LAND_AREA: 43561.85, POP_PER_SQ_MILE: 102.6},
        {ANSI: "23000", STATE: "MAINE", TOTAL_POP: 1318301, LAND_AREA: 30861.55, POP_PER_SQ_MILE: 41.3},
        {ANSI: "24000", STATE: "MARYLAND", TOTAL_POP: 5699478, LAND_AREA: 9773.82, POP_PER_SQ_MILE: 541.9},
        {ANSI: "25000", STATE: "MASSACHUSETTS", TOTAL_POP: 6593587, LAND_AREA: 7840.02, POP_PER_SQ_MILE: 809.8},
        {ANSI: "26000", STATE: "MICHIGAN", TOTAL_POP: 9969727, LAND_AREA: 56803.82, POP_PER_SQ_MILE: 175},
        {ANSI: "27000", STATE: "MINNESOTA", TOTAL_POP: 5266214, LAND_AREA: 79610.08, POP_PER_SQ_MILE: 61.8},
        {ANSI: "28000", STATE: "MISSISSIPPI", TOTAL_POP: 2951996, LAND_AREA: 46906.96, POP_PER_SQ_MILE: 60.6},
        {ANSI: "29000", STATE: "MISSOURI", TOTAL_POP: 5987580, LAND_AREA: 68885.93, POP_PER_SQ_MILE: 81.2},
        {ANSI: "30000", STATE: "MONTANA", TOTAL_POP: 974989, LAND_AREA: 145552.43, POP_PER_SQ_MILE: 6.2},
        {ANSI: "31000", STATE: "NEBRASKA", TOTAL_POP: 1796619, LAND_AREA: 76872.41, POP_PER_SQ_MILE: 22.3},
        {ANSI: "32000", STATE: "NEVADA", TOTAL_POP: 2643085, LAND_AREA: 109825.99, POP_PER_SQ_MILE: 18.2},
        {ANSI: "33000", STATE: "NEW HAMPSHIRE", TOTAL_POP: 1324575, LAND_AREA: 8968.1, POP_PER_SQ_MILE: 137.8},
        {ANSI: "34000", STATE: "NEW JERSEY", TOTAL_POP: 8707739, LAND_AREA: 7417.34, POP_PER_SQ_MILE: 1134.5},
        {ANSI: "35000", STATE: "NEW MEXICO", TOTAL_POP: 2009671, LAND_AREA: 121355.53, POP_PER_SQ_MILE: 15},
        {ANSI: "36000", STATE: "NEW YORK", TOTAL_POP: 19541453, LAND_AREA: 47213.79, POP_PER_SQ_MILE: 401.9},
        {ANSI: "37000", STATE: "NORTH CAROLINA", TOTAL_POP: 9380884, LAND_AREA: 48710.88, POP_PER_SQ_MILE: 165.2},
        {ANSI: "38000", STATE: "NORTH DAKOTA", TOTAL_POP: 646844, LAND_AREA: 68975.93, POP_PER_SQ_MILE: 9.3},
        {ANSI: "39000", STATE: "OHIO", TOTAL_POP: 11542645, LAND_AREA: 40948.38, POP_PER_SQ_MILE: 277.3},
        {ANSI: "40000", STATE: "OKLAHOMA", TOTAL_POP: 3687050, LAND_AREA: 68667.06, POP_PER_SQ_MILE: 50.3},
        {ANSI: "41000", STATE: "OREGON", TOTAL_POP: 3825657, LAND_AREA: 95996.79, POP_PER_SQ_MILE: 35.6},
        {ANSI: "42000", STATE: "PENNSYLVANIA", TOTAL_POP: 12604767, LAND_AREA: 44816.61, POP_PER_SQ_MILE: 274},
        {ANSI: "44000", STATE: "RHODE ISLAND", TOTAL_POP: 1053209, LAND_AREA: 1044.93, POP_PER_SQ_MILE: 1003.2},
        {ANSI: "45000", STATE: "SOUTH CAROLINA", TOTAL_POP: 4561242, LAND_AREA: 30109.47, POP_PER_SQ_MILE: 133.2},
        {ANSI: "46000", STATE: "SOUTH DAKOTA", TOTAL_POP: 812383, LAND_AREA: 75884.64, POP_PER_SQ_MILE: 9.9},
        {ANSI: "47000", STATE: "TENNESSEE", TOTAL_POP: 6296254, LAND_AREA: 41217.12, POP_PER_SQ_MILE: 138},
        {ANSI: "48000", STATE: "TEXAS", TOTAL_POP: 24782302, LAND_AREA: 261797.12, POP_PER_SQ_MILE: 79.6},
        {ANSI: "49000", STATE: "UTAH", TOTAL_POP: 2784572, LAND_AREA: 82143.65, POP_PER_SQ_MILE: 27.2},
        {ANSI: "50000", STATE: "VERMONT", TOTAL_POP: 621760, LAND_AREA: 9249.56, POP_PER_SQ_MILE: 65.8},
        {ANSI: "51000", STATE: "VIRGINIA", TOTAL_POP: 7882590, LAND_AREA: 39594.07, POP_PER_SQ_MILE: 178.8},
        {ANSI: "53000", STATE: "WASHINGTON", TOTAL_POP: 6664195, LAND_AREA: 66544.06, POP_PER_SQ_MILE: 88.6},
        {ANSI: "54000", STATE: "WEST VIRGINIA", TOTAL_POP: 1819777, LAND_AREA: 24077.73, POP_PER_SQ_MILE: 75.1},
        {ANSI: "55000", STATE: "WISCONSIN", TOTAL_POP: 5654774, LAND_AREA: 54310.1, POP_PER_SQ_MILE: 98.8},
        {ANSI: "56000", STATE: "WYOMING", TOTAL_POP: 544270, LAND_AREA: 97100.4, POP_PER_SQ_MILE: 5.1	}
    ],
	TEMPLATE_TR = '<tr id="row_{ANSI}"><td>{STATE}</td><td>{TOTAL_POP}</td><td>{LAND_AREA}</td></tr>';
	
  	// Create a Recordset instance.
  	var recordset = new Y.Recordset({records:state_census_data.slice(0,10)});
	recordset.plug(Y.Plugin.RecordsetSort);
	
	
	renderRows(recordset);
	setUpEvents(recordset);
	setUpButtons(recordset);
	
	function setUpEvents(rs) {
		/*Edits the table based on recordset events that are fired*/
		rs.sort.after('sort', function(e) {
			renderRows(recordset);
		});
	}

	function setUpButtons(rs) {

		function getRandomInt(min, max)
		{
		  return Math.floor(Math.random() * (max - min + 1)) + min;
		}
		
		Y.one('#sortButton').on('click', function(e) {
			//prevent default behavior (stop link)
			e.preventDefault();
			rs.sort.sort('STATE',false);
			Y.all('.secondary').set('disabled', false);
		});
		
		Y.one('#resortButton').on('click', function(e) {
			e.preventDefault();
			rs.sort.resort();
		});
		
		Y.one('#flipButton').on('click', function(e) {
			e.preventDefault();
			rs.sort.flip();
		});
		
		Y.one('#shuffleButton').on('click', function(e) {
			e.preventDefault;
			
			function arrayShuffle(theArray) {
			 	var len = theArray.length;
				var i = len;
				 while (i--) {
				 	var p = parseInt(Math.random()*len);
					var t = theArray[i];
			  		theArray[i] = theArray[p];
				  	theArray[p] = t;
			 	}
			};
			
			arrayShuffle(recordset._items);
			renderRows(recordset);
		});
		
		Y.one('#reverseButton').on('click', function(e) {
			e.preventDefault();
			rs.sort.reverse();
			renderRows(recordset);
		});
		
		Y.one('#customButton').on('click',function(e) {
			e.preventDefault();
			 var customsort = function(recA, recB, field, desc) {
		            var first_sorted = Y.ArraySort.compare(recA.getValue('TOTAL_POP') + recA.getValue('LAND_AREA'), recB.getValue('TOTAL_POP') + recB.getValue('LAND_AREA'), desc);
					if (first_sorted === 0) {
						return compare(recA.getValue("id"), recB.get("id"), desc);
					}
					else {
						return first_sorted;
					}
		    };
		
			recordset.sort.sort('',true,customsort);
			renderRows(recordset);
		});
	}
	
	function renderRows(rs) {
		var tbody = Y.one('#demo tbody'),
		i=0,
		len = rs.getLength(),
		html = '';
		
		if (tbody.hasChildNodes()) {
			tbody.get('children').remove();
		}
		
		for (; i < len; i++) {
			html += Y.Lang.sub(TEMPLATE_TR, rs.getRecord(i).getValue());
		}
		tbody.append(html);
	}
});
</script>

	<!--END SOURCE CODE FOR EXAMPLE =============================== -->

	
		</div>
	</div>
	</div>

	<p>The Sort plugin for recordset allows a recordset to have default and custom sorting functionality.</p>

<h3>Using the Plugin</h3>
<p>The RecordsetSort plugin can be "plugged in" to any recordset instance using the <code>plug</code> method. Methods that exist on the plugin can be called using the <em>sort</em> namespace</p>
<div id="syntax-872a588ee8aa08b46cfbe9d05d0ad533" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;recordset-base&quot;</span><span class="sy0">,</span> <span class="st0">&quot;recordset-sort&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	<span class="co1">//Add &quot;recordset-sort&quot; in the use statement.</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">	<span class="kw2">var</span> data <span class="sy0">=</span> <span class="br0">&#91;</span></div></li><li class="li1"><div class="de1">		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">3</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">2</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">1</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">9</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">8</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">7</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">1</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">2</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">3</span><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">	<span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">	<span class="co1">//Recordset is created with the objects from the data array</span></div></li><li class="li1"><div class="de1">	myRecordset <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Recordset</span><span class="br0">&#40;</span><span class="br0">&#123;</span>records<span class="sy0">:</span> data<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	<span class="co1">//Plugging in Sorting functionality</span></div></li><li class="li2"><div class="de2">	myRecordset.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">RecordsetSort</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	<span class="co1">//You can now call sort methods on the myRecordset instance using the &quot;sort&quot; namespace.</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">sort</span>.<span class="me1">sort</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;recordset-base&quot;</span><span class="sy0">,</span> <span class="st0">&quot;recordset-sort&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
	<span class="co1">//Add &quot;recordset-sort&quot; in the use statement.</span>
&nbsp;
	<span class="kw2">var</span> data <span class="sy0">=</span> <span class="br0">&#91;</span>
		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">3</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">2</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">1</span><span class="br0">&#125;</span><span class="sy0">,</span>
		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">9</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">8</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">7</span><span class="br0">&#125;</span><span class="sy0">,</span>
		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">1</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">2</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">3</span><span class="br0">&#125;</span>
	<span class="br0">&#93;</span><span class="sy0">,</span>
&nbsp;
	<span class="co1">//Recordset is created with the objects from the data array</span>
	myRecordset <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Recordset</span><span class="br0">&#40;</span><span class="br0">&#123;</span>records<span class="sy0">:</span> data<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	<span class="co1">//Plugging in Sorting functionality</span>
	myRecordset.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">RecordsetSort</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	<span class="co1">//You can now call sort methods on the myRecordset instance using the &quot;sort&quot; namespace.</span>
&nbsp;
	myRecordset.<span class="me1">sort</span>.<span class="me1">sort</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-872a588ee8aa08b46cfbe9d05d0ad533-plain">YUI().use("recordset-base", "recordset-sort", function(Y) {
    
	//Add "recordset-sort" in the use statement.

	var data = [
		{a:3, b:2, c:1},
		{a:9, b:8, c:7},
		{a:1, b:2, c:3}
	],
	
	//Recordset is created with the objects from the data array
	myRecordset = new Y.Recordset({records: data});
	
	//Plugging in Sorting functionality
	myRecordset.plug(Y.Plugin.RecordsetSort);
	
	//You can now call sort methods on the myRecordset instance using the "sort" namespace.
	
	myRecordset.sort.sort();

});</textarea></div>	
<h3>Using the RecordsetSort Plugin</h3>

<ul class="topspace">
	<li><a href="#default">Default Sorting</a></li>
	<li><a href="#resort">Resorting</a></li>
	<li><a href="#reverse">Reversing the Recordset</a></li>
	<li><a href="#flip">Flipping the Sort Order</a></li>
	<li><a href="#custom">Custom Sort Functions</a></li>
	<li><a href="attrs">Helper Attributes and Events</a></li>
</ul>

<h4 id="default">Default Sorting</h4>
<p>If a custom sort function is not defined, RecordsetSort sorts using the default sorter as found in the Arraysort module's <code>compare</code> method. In the default sorter, two records are compared based on the key specified. If the values are equal, the IDs of the records are compared.</p>

<p>You can sort a recordset using the default sort method by calling the <code>sort</code> method. Two arguments must be passed in: a string of the key to sort by, and a boolean representing if the sort order is descending or not.</p>
<div id="syntax-e1542c765f7bcf474dfbf03e80296171" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;recordset-base&quot;</span><span class="sy0">,</span><span class="st0">&quot;recordset-sort&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> data <span class="sy0">=</span> <span class="br0">&#91;</span></div></li><li class="li1"><div class="de1">		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">3</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">2</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">1</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">9</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">8</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">7</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">1</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">2</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">3</span><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">	<span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	<span class="co1">//Recordset is created with the objects from the data array</span></div></li><li class="li1"><div class="de1">	myRecordset <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Recordset</span><span class="br0">&#40;</span><span class="br0">&#123;</span>records<span class="sy0">:</span> data<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">	myRecordset.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">RecordsetSort</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	<span class="co1">//sorts the recordset in ascending order using the value at 'a'</span></div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">sort</span>.<span class="me1">sort</span><span class="br0">&#40;</span><span class="st0">'a'</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">	<span class="co1">//sorts the recordset in descending order using the value at 'b'</span></div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">sort</span>.<span class="me1">sort</span><span class="br0">&#40;</span><span class="st0">'b'</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;recordset-base&quot;</span><span class="sy0">,</span><span class="st0">&quot;recordset-sort&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> data <span class="sy0">=</span> <span class="br0">&#91;</span>
		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">3</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">2</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">1</span><span class="br0">&#125;</span><span class="sy0">,</span>
		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">9</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">8</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">7</span><span class="br0">&#125;</span><span class="sy0">,</span>
		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">1</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">2</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">3</span><span class="br0">&#125;</span>
	<span class="br0">&#93;</span><span class="sy0">,</span>
&nbsp;
	<span class="co1">//Recordset is created with the objects from the data array</span>
	myRecordset <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Recordset</span><span class="br0">&#40;</span><span class="br0">&#123;</span>records<span class="sy0">:</span> data<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
	myRecordset.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">RecordsetSort</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	<span class="co1">//sorts the recordset in ascending order using the value at 'a'</span>
	myRecordset.<span class="me1">sort</span>.<span class="me1">sort</span><span class="br0">&#40;</span><span class="st0">'a'</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	<span class="co1">//sorts the recordset in descending order using the value at 'b'</span>
	myRecordset.<span class="me1">sort</span>.<span class="me1">sort</span><span class="br0">&#40;</span><span class="st0">'b'</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-e1542c765f7bcf474dfbf03e80296171-plain">YUI().use("recordset-base","recordset-sort", function(Y) {
    var data = [
		{a:3, b:2, c:1},
		{a:9, b:8, c:7},
		{a:1, b:2, c:3}
	],
	
	//Recordset is created with the objects from the data array
	myRecordset = new Y.Recordset({records: data});
	myRecordset.plug(Y.Plugin.RecordsetSort);
	
	//sorts the recordset in ascending order using the value at 'a'
	myRecordset.sort.sort('a', false);
	
	//sorts the recordset in descending order using the value at 'b'
	myRecordset.sort.sort('b', true);

});</textarea></div>
<h4 id="resort">Resorting</h4>
<p>If the recordset has been sorted at some point in time, the <code>resort</code> method can be called, which will sort the recordset using the last-used options.</p>

<p>Optionally, the last used options to sort the recordset can be retrieved through the <code>lastSortProperties</code> attribute.</p>

<div id="syntax-caf6ecef02bba7501fd5fcb6e25e648a" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;recordst-base&quot;</span><span class="sy0">,</span> <span class="st0">&quot;recordset-sort&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> data <span class="sy0">=</span> <span class="br0">&#91;</span></div></li><li class="li1"><div class="de1">		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">3</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">2</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">1</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">9</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">8</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">7</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">1</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">2</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">3</span><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">	<span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	<span class="co1">//Recordset is created with the objects from the data array</span></div></li><li class="li1"><div class="de1">	myRecordset <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Recordset</span><span class="br0">&#40;</span><span class="br0">&#123;</span>records<span class="sy0">:</span> data<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">	myRecordset.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">RecordsetSort</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	<span class="co1">//sorts the recordset in ascending order using the value at 'a'</span></div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">sort</span>.<span class="me1">sort</span><span class="br0">&#40;</span><span class="st0">'a'</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">	<span class="co1">//Add a record so that the recordset is no longer sorted</span></div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">add</span><span class="br0">&#40;</span><span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">10</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">60</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">0</span><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	<span class="co1">//Resort the recordset in ascending order using the value at 'a'</span></div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">sort</span>.<span class="me1">resort</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;recordst-base&quot;</span><span class="sy0">,</span> <span class="st0">&quot;recordset-sort&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> data <span class="sy0">=</span> <span class="br0">&#91;</span>
		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">3</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">2</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">1</span><span class="br0">&#125;</span><span class="sy0">,</span>
		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">9</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">8</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">7</span><span class="br0">&#125;</span><span class="sy0">,</span>
		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">1</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">2</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">3</span><span class="br0">&#125;</span>
	<span class="br0">&#93;</span><span class="sy0">,</span>
&nbsp;
	<span class="co1">//Recordset is created with the objects from the data array</span>
	myRecordset <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Recordset</span><span class="br0">&#40;</span><span class="br0">&#123;</span>records<span class="sy0">:</span> data<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
	myRecordset.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">RecordsetSort</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	<span class="co1">//sorts the recordset in ascending order using the value at 'a'</span>
	myRecordset.<span class="me1">sort</span>.<span class="me1">sort</span><span class="br0">&#40;</span><span class="st0">'a'</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	<span class="co1">//Add a record so that the recordset is no longer sorted</span>
	myRecordset.<span class="me1">add</span><span class="br0">&#40;</span><span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">10</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">60</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">0</span><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	<span class="co1">//Resort the recordset in ascending order using the value at 'a'</span>
	myRecordset.<span class="me1">sort</span>.<span class="me1">resort</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-caf6ecef02bba7501fd5fcb6e25e648a-plain">YUI().use("recordst-base", "recordset-sort", function(Y) {
    var data = [
		{a:3, b:2, c:1},
		{a:9, b:8, c:7},
		{a:1, b:2, c:3}
	],
	
	//Recordset is created with the objects from the data array
	myRecordset = new Y.Recordset({records: data});
	myRecordset.plug(Y.Plugin.RecordsetSort);
	
	//sorts the recordset in ascending order using the value at 'a'
	myRecordset.sort.sort('a', false);
	
	//Add a record so that the recordset is no longer sorted
	myRecordset.add({a:10, b:60, c:0});
	
	//Resort the recordset in ascending order using the value at 'a'
	myRecordset.sort.resort();
});</textarea></div>
<h4 id="reverse">Reversing the Recordset</h4>
<p>The order of the recordset can be reversed by calling the <code>reverse</code> method. This method does not sort the recordset. </p>
<div id="syntax-a92884887e9cebe5431b3547c73f0c28" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;recordset-base&quot;</span><span class="sy0">,</span> <span class="st0">&quot;recordset-sort&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> data <span class="sy0">=</span> <span class="br0">&#91;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;a&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column A&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;b&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column B&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;c&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column C&quot;</span><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	myRecordset <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Recordset</span><span class="br0">&#40;</span><span class="br0">&#123;</span>records<span class="sy0">:</span>data<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">	myRecordset.<span class="me1">sort</span>.<span class="me1">reverse</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="co1">//now the first record in the recordset will be {key:&quot;c&quot;, label:&quot;Column C&quot;}</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;recordset-base&quot;</span><span class="sy0">,</span> <span class="st0">&quot;recordset-sort&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> data <span class="sy0">=</span> <span class="br0">&#91;</span>
        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;a&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column A&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;b&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column B&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;c&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column C&quot;</span><span class="br0">&#125;</span>
    <span class="br0">&#93;</span><span class="sy0">,</span>
&nbsp;
	myRecordset <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Recordset</span><span class="br0">&#40;</span><span class="br0">&#123;</span>records<span class="sy0">:</span>data<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	myRecordset.<span class="me1">sort</span>.<span class="me1">reverse</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="co1">//now the first record in the recordset will be {key:&quot;c&quot;, label:&quot;Column C&quot;}</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-a92884887e9cebe5431b3547c73f0c28-plain">YUI().use("recordset-base", "recordset-sort", function(Y) {
    var data = [
        {key:"a", label:"Column A"},
        {key:"b", label:"Column B"},
        {key:"c", label:"Column C"}
    ],
	
	myRecordset = new Y.Recordset({records:data});
	
	myRecordset.sort.reverse(); //now the first record in the recordset will be {key:"c", label:"Column C"}
});</textarea></div>
<h4 id="flip">Flipping the Sort Order</h4>
<p>As opposed to <code>reverse</code>, the <code>flip</code> method looks at the last-used sort options, and reapplies the sort in the opposite order (ie: descending if the recordset was initially in ascending order). The recordset does not have to be in a sorted state. This method does perform a sort.</p>
<div id="syntax-32e7021bb3b254474d889585151e6f13" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;recordset-base&quot;</span><span class="sy0">,</span> <span class="st0">&quot;recordset-sort&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> data <span class="sy0">=</span> <span class="br0">&#91;</span></div></li><li class="li1"><div class="de1">		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">3</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">2</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">1</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">9</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">8</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">7</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">1</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">2</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">3</span><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">	<span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	<span class="co1">//Recordset is created with the objects from the data array</span></div></li><li class="li1"><div class="de1">	myRecordset <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Recordset</span><span class="br0">&#40;</span><span class="br0">&#123;</span>records<span class="sy0">:</span> data<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">	myRecordset.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">RecordsetSort</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	<span class="co1">//sorts the recordset in ascending order using the value at 'a'</span></div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">sort</span>.<span class="me1">sort</span><span class="br0">&#40;</span><span class="st0">'a'</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">	myRecordset.<span class="me1">add</span><span class="br0">&#40;</span><span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">10</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">6</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">0</span><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	<span class="co1">//sorts the recordset in descending order using the value at 'a'</span></div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">sort</span>.<span class="me1">flip</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;recordset-base&quot;</span><span class="sy0">,</span> <span class="st0">&quot;recordset-sort&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> data <span class="sy0">=</span> <span class="br0">&#91;</span>
		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">3</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">2</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">1</span><span class="br0">&#125;</span><span class="sy0">,</span>
		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">9</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">8</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">7</span><span class="br0">&#125;</span><span class="sy0">,</span>
		<span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">1</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">2</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">3</span><span class="br0">&#125;</span>
	<span class="br0">&#93;</span><span class="sy0">,</span>
&nbsp;
	<span class="co1">//Recordset is created with the objects from the data array</span>
	myRecordset <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Recordset</span><span class="br0">&#40;</span><span class="br0">&#123;</span>records<span class="sy0">:</span> data<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
	myRecordset.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">RecordsetSort</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	<span class="co1">//sorts the recordset in ascending order using the value at 'a'</span>
	myRecordset.<span class="me1">sort</span>.<span class="me1">sort</span><span class="br0">&#40;</span><span class="st0">'a'</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	myRecordset.<span class="me1">add</span><span class="br0">&#40;</span><span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">10</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">6</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">0</span><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	<span class="co1">//sorts the recordset in descending order using the value at 'a'</span>
	myRecordset.<span class="me1">sort</span>.<span class="me1">flip</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-32e7021bb3b254474d889585151e6f13-plain">YUI().use("recordset-base", "recordset-sort", function(Y) {
    var data = [
		{a:3, b:2, c:1},
		{a:9, b:8, c:7},
		{a:1, b:2, c:3}
	],
	
	//Recordset is created with the objects from the data array
	myRecordset = new Y.Recordset({records: data});
	myRecordset.plug(Y.Plugin.RecordsetSort);
	
	//sorts the recordset in ascending order using the value at 'a'
	myRecordset.sort.sort('a', false);
	
	myRecordset.add({a:10, b:6, c:0});
	
	//sorts the recordset in descending order using the value at 'a'
	myRecordset.sort.flip();
});</textarea></div>
<h4 id="custom">Providing a Custom Sort Function</h4>
<p>A custom sort function can be provided to the sort plugin very easily. The <code>sort</code> method accepts a custom sort function as a third argument, and if it receives one, it will use it rather than the default sorter. The custom sort function should be written such that it compares two records, and returns one or the other, based on comparator operations.</p>
<div id="syntax-45b4e8a8bf623f7c852d1aa30346e22d" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;recordset-base&quot;</span><span class="sy0">,</span> <span class="st0">&quot;recordset-sort&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> data <span class="sy0">=</span> <span class="br0">&#91;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;a&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column A&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;b&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column B&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;c&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column C&quot;</span><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	myRecordset <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Recordset</span><span class="br0">&#40;</span><span class="br0">&#123;</span>records<span class="sy0">:</span>data<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">	<span class="co1">//Define a custom sort function, which first compares values in the specified key, and if its a tie,</span></div></li><li class="li1"><div class="de1">	<span class="co1">//compares value in key 'b'. If that's also a tie, it looks at the IDs.</span></div></li><li class="li1"><div class="de1">	 customsort <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>recA<span class="sy0">,</span> recB<span class="sy0">,</span> field<span class="sy0">,</span> desc<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> first_sorted <span class="sy0">=</span> compare<span class="br0">&#40;</span>recA.<span class="me1">getValue</span><span class="br0">&#40;</span>field<span class="br0">&#41;</span><span class="sy0">,</span> recB.<span class="me1">getValue</span><span class="br0">&#40;</span>field<span class="br0">&#41;</span><span class="sy0">,</span> desc<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">        <span class="kw1">if</span><span class="br0">&#40;</span>first_sorted <span class="sy0">===</span> <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            <span class="kw2">var</span> second_sorted <span class="sy0">=</span> compare<span class="br0">&#40;</span>recA.<span class="me1">getValue</span><span class="br0">&#40;</span><span class="st0">'b'</span><span class="br0">&#41;</span><span class="sy0">,</span> recB.<span class="me1">getValue</span><span class="br0">&#40;</span><span class="st0">'b'</span><span class="br0">&#41;</span><span class="sy0">,</span> desc<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">			<span class="kw1">if</span> <span class="br0">&#40;</span>second_sorted <span class="sy0">===</span> <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">				<span class="kw1">return</span> compare<span class="br0">&#40;</span>recA.<span class="me1">getValue</span><span class="br0">&#40;</span><span class="st0">&quot;id&quot;</span><span class="br0">&#41;</span><span class="sy0">,</span> recB.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">&quot;id&quot;</span><span class="br0">&#41;</span><span class="sy0">,</span> desc<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">			<span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">			<span class="kw1">else</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">				<span class="kw1">return</span> second_sorted<span class="sy0">;</span></div></li><li class="li1"><div class="de1">			<span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="kw1">else</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">            <span class="kw1">return</span> first_sorted<span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	<span class="co1">//Sort the recordset using the custom sort function.</span></div></li><li class="li2"><div class="de2">	myRecordset.<span class="me1">sort</span>.<span class="me1">sort</span><span class="br0">&#40;</span><span class="st0">'a'</span><span class="sy0">,</span><span class="kw2">false</span><span class="sy0">,</span> customsort<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;recordset-base&quot;</span><span class="sy0">,</span> <span class="st0">&quot;recordset-sort&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> data <span class="sy0">=</span> <span class="br0">&#91;</span>
        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;a&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column A&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;b&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column B&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;c&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column C&quot;</span><span class="br0">&#125;</span>
    <span class="br0">&#93;</span><span class="sy0">,</span>
&nbsp;
	myRecordset <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Recordset</span><span class="br0">&#40;</span><span class="br0">&#123;</span>records<span class="sy0">:</span>data<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
&nbsp;
	<span class="co1">//Define a custom sort function, which first compares values in the specified key, and if its a tie,</span>
	<span class="co1">//compares value in key 'b'. If that's also a tie, it looks at the IDs.</span>
	 customsort <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>recA<span class="sy0">,</span> recB<span class="sy0">,</span> field<span class="sy0">,</span> desc<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> first_sorted <span class="sy0">=</span> compare<span class="br0">&#40;</span>recA.<span class="me1">getValue</span><span class="br0">&#40;</span>field<span class="br0">&#41;</span><span class="sy0">,</span> recB.<span class="me1">getValue</span><span class="br0">&#40;</span>field<span class="br0">&#41;</span><span class="sy0">,</span> desc<span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="kw1">if</span><span class="br0">&#40;</span>first_sorted <span class="sy0">===</span> <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="kw2">var</span> second_sorted <span class="sy0">=</span> compare<span class="br0">&#40;</span>recA.<span class="me1">getValue</span><span class="br0">&#40;</span><span class="st0">'b'</span><span class="br0">&#41;</span><span class="sy0">,</span> recB.<span class="me1">getValue</span><span class="br0">&#40;</span><span class="st0">'b'</span><span class="br0">&#41;</span><span class="sy0">,</span> desc<span class="br0">&#41;</span><span class="sy0">;</span>
			<span class="kw1">if</span> <span class="br0">&#40;</span>second_sorted <span class="sy0">===</span> <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
				<span class="kw1">return</span> compare<span class="br0">&#40;</span>recA.<span class="me1">getValue</span><span class="br0">&#40;</span><span class="st0">&quot;id&quot;</span><span class="br0">&#41;</span><span class="sy0">,</span> recB.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">&quot;id&quot;</span><span class="br0">&#41;</span><span class="sy0">,</span> desc<span class="br0">&#41;</span><span class="sy0">;</span>
			<span class="br0">&#125;</span>
			<span class="kw1">else</span> <span class="br0">&#123;</span>
				<span class="kw1">return</span> second_sorted<span class="sy0">;</span>
			<span class="br0">&#125;</span>
        <span class="br0">&#125;</span>
        <span class="kw1">else</span> <span class="br0">&#123;</span>
            <span class="kw1">return</span> first_sorted<span class="sy0">;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
	<span class="co1">//Sort the recordset using the custom sort function.</span>
	myRecordset.<span class="me1">sort</span>.<span class="me1">sort</span><span class="br0">&#40;</span><span class="st0">'a'</span><span class="sy0">,</span><span class="kw2">false</span><span class="sy0">,</span> customsort<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-45b4e8a8bf623f7c852d1aa30346e22d-plain">YUI().use("recordset-base", "recordset-sort", function(Y) {
    var data = [
        {key:"a", label:"Column A"},
        {key:"b", label:"Column B"},
        {key:"c", label:"Column C"}
    ],
	
	myRecordset = new Y.Recordset({records:data});
	
	
	//Define a custom sort function, which first compares values in the specified key, and if its a tie,
	//compares value in key 'b'. If that's also a tie, it looks at the IDs.
	 customsort = function(recA, recB, field, desc) {
        var first_sorted = compare(recA.getValue(field), recB.getValue(field), desc);
        if(first_sorted === 0) {
            var second_sorted = compare(recA.getValue('b'), recB.getValue('b'), desc);
			if (second_sorted === 0) {
				return compare(recA.getValue("id"), recB.get("id"), desc);
			}
			else {
				return second_sorted;
			}
        }
        else {
            return first_sorted;
        }
    };

	//Sort the recordset using the custom sort function.
	myRecordset.sort.sort('a',false, customsort);
});</textarea></div>
<h4 id="attrs">Helper Attributes and Events</h4>
<p>Sorting is usually an expensive operation, so the RecordsetSort plug-in has some attributes to allow you to decide whether you need to sort or not.</p>

<h6>Is the recordset already sorted?</h6>
<p>The <code>isSorted</code> attribute is a boolean that designates if the recordset is in a sorted state. Under the hood, <code>isSorted</code> will change to false if records have been added (or updated), but will not change if records have been removed.</p>

<div id="syntax-86e48450fd6a3b105cc418fc96cf37b1" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;recordset-base&quot;</span><span class="sy0">,</span> <span class="st0">&quot;recordset-sort&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> data <span class="sy0">=</span> <span class="br0">&#91;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;a&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column A&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;b&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column B&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;c&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column C&quot;</span><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	myRecordset <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Recordset</span><span class="br0">&#40;</span><span class="br0">&#123;</span>records<span class="sy0">:</span>data<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">RecordsetSort</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">sort</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'isSorted'</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="co1">//returns false</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">sort</span>.<span class="me1">sort</span><span class="br0">&#40;</span><span class="st0">'a'</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">sort</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'isSorted'</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="co1">//returns true</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">remove</span><span class="br0">&#40;</span><span class="nu0">1</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">sort</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'isSorted'</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="co1">//returns true</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">add</span><span class="br0">&#40;</span><span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">10</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">50</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">60</span><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">	myRecordset.<span class="me1">sort</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'isSorted'</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="co1">//returns false</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;recordset-base&quot;</span><span class="sy0">,</span> <span class="st0">&quot;recordset-sort&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> data <span class="sy0">=</span> <span class="br0">&#91;</span>
        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;a&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column A&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;b&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column B&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;c&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column C&quot;</span><span class="br0">&#125;</span>
    <span class="br0">&#93;</span><span class="sy0">,</span>
&nbsp;
	myRecordset <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Recordset</span><span class="br0">&#40;</span><span class="br0">&#123;</span>records<span class="sy0">:</span>data<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
	myRecordset.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">RecordsetSort</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	myRecordset.<span class="me1">sort</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'isSorted'</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="co1">//returns false</span>
&nbsp;
	myRecordset.<span class="me1">sort</span>.<span class="me1">sort</span><span class="br0">&#40;</span><span class="st0">'a'</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span>
	myRecordset.<span class="me1">sort</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'isSorted'</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="co1">//returns true</span>
&nbsp;
	myRecordset.<span class="me1">remove</span><span class="br0">&#40;</span><span class="nu0">1</span><span class="br0">&#41;</span><span class="sy0">;</span>
	myRecordset.<span class="me1">sort</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'isSorted'</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="co1">//returns true</span>
&nbsp;
	myRecordset.<span class="me1">add</span><span class="br0">&#40;</span><span class="br0">&#123;</span>a<span class="sy0">:</span><span class="nu0">10</span><span class="sy0">,</span> b<span class="sy0">:</span><span class="nu0">50</span><span class="sy0">,</span> c<span class="sy0">:</span><span class="nu0">60</span><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
	myRecordset.<span class="me1">sort</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'isSorted'</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="co1">//returns false</span>
&nbsp;
&nbsp;
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-86e48450fd6a3b105cc418fc96cf37b1-plain">YUI().use("recordset-base", "recordset-sort", function(Y) {
    var data = [
        {key:"a", label:"Column A"},
        {key:"b", label:"Column B"},
        {key:"c", label:"Column C"}
    ],
	
	myRecordset = new Y.Recordset({records:data});
	myRecordset.plug(Y.Plugin.RecordsetSort);
	
	myRecordset.sort.get('isSorted'); //returns false
	
	myRecordset.sort.sort('a', true);
	myRecordset.sort.get('isSorted'); //returns true
	
	myRecordset.remove(1);
	myRecordset.sort.get('isSorted'); //returns true
	
	myRecordset.add({a:10, b:50, c:60});
	myRecordset.sort.get('isSorted'); //returns false
	
	
});</textarea></div><p> By setting up hooks on the <code>isSorted</code> attribute change events, you can better determine whether or not to perform a sort operation.</p>

<h6 id='lastSortProperties'>Find last-used sort properties</h6>

<p>The <code>lastSortProperties</code> attribute stores an object literal of the last properties used to sort the recordset.</p>

<div id="syntax-64f2155499b150c6729398be312233a5" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;recordset-base&quot;</span><span class="sy0">,</span> <span class="st0">&quot;recordset-sort&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> data <span class="sy0">=</span> <span class="br0">&#91;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;a&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column A&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;b&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column B&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;c&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column C&quot;</span><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	myRecordset <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Recordset</span><span class="br0">&#40;</span><span class="br0">&#123;</span>records<span class="sy0">:</span>data<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">RecordsetSort</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">sort</span>.<span class="me1">sort</span><span class="br0">&#40;</span><span class="st0">'a'</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">	<span class="kw2">var</span> sortProperties <span class="sy0">=</span> myRecordset.<span class="me1">sort</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'lastSortProperties'</span><span class="br0">&#41;</span><span class="sy0">;</span> </div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	<span class="coMULTI">/* </span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="coMULTI">	sortProperties is an object literal containing: </span></div></li><li class="li1"><div class="de1"><span class="coMULTI">	{</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">		field: 'a',</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">		desc: 'true',</span></div></li><li class="li2"><div class="de2"><span class="coMULTI">		sorter: defaultSorter</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">	}</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="coMULTI">	*/</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;recordset-base&quot;</span><span class="sy0">,</span> <span class="st0">&quot;recordset-sort&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> data <span class="sy0">=</span> <span class="br0">&#91;</span>
        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;a&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column A&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;b&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column B&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;c&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column C&quot;</span><span class="br0">&#125;</span>
    <span class="br0">&#93;</span><span class="sy0">,</span>
&nbsp;
	myRecordset <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Recordset</span><span class="br0">&#40;</span><span class="br0">&#123;</span>records<span class="sy0">:</span>data<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
	myRecordset.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">RecordsetSort</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	myRecordset.<span class="me1">sort</span>.<span class="me1">sort</span><span class="br0">&#40;</span><span class="st0">'a'</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span>
	<span class="kw2">var</span> sortProperties <span class="sy0">=</span> myRecordset.<span class="me1">sort</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'lastSortProperties'</span><span class="br0">&#41;</span><span class="sy0">;</span> 
&nbsp;
	<span class="coMULTI">/* 
&nbsp;
	sortProperties is an object literal containing: 
	{
		field: 'a',
		desc: 'true',
		sorter: defaultSorter
	}
&nbsp;
	*/</span>
&nbsp;
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-64f2155499b150c6729398be312233a5-plain">YUI().use("recordset-base", "recordset-sort", function(Y) {
    var data = [
        {key:"a", label:"Column A"},
        {key:"b", label:"Column B"},
        {key:"c", label:"Column C"}
    ],
	
	myRecordset = new Y.Recordset({records:data});
	myRecordset.plug(Y.Plugin.RecordsetSort);
	
	myRecordset.sort.sort('a', true);
	var sortProperties = myRecordset.sort.get('lastSortProperties'); 
	
	/* 
	
	sortProperties is an object literal containing: 
	{
		field: 'a',
		desc: 'true',
		sorter: defaultSorter
	}
	
	*/
	
});</textarea></div>
<h6>'sort' Event</h6>

<p>The RecordsetSort plugin fires the 'sort' event whenever it sorts a recordset. Hooking onto this event using the <code>on</code> method triggers code to be run before the sort occurs. On the other hand, using the 'after' method triggers your code to be run after the sort.</p>

<p>The object returned with the event has the same fields as the <a href="#lastSortProperties">lastSortProperties</a> object.</p>

<div id="syntax-0771fcb2421d2259b816f476e1403096" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;recordset-base&quot;</span><span class="sy0">,</span> <span class="st0">&quot;recordset-sort&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> data <span class="sy0">=</span> <span class="br0">&#91;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;a&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column A&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;b&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column B&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;c&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column C&quot;</span><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	myRecordset <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Recordset</span><span class="br0">&#40;</span><span class="br0">&#123;</span>records<span class="sy0">:</span>data<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">RecordsetSort</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">	myRecordset.<span class="me1">sort</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'sort'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">		Y.<span class="me1">log</span><span class="br0">&#40;</span><span class="st0">'this recordset is about to be sorted'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">	<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">	myRecordset.<span class="me1">sort</span>.<span class="me1">sort</span><span class="br0">&#40;</span><span class="st0">'a'</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;recordset-base&quot;</span><span class="sy0">,</span> <span class="st0">&quot;recordset-sort&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> data <span class="sy0">=</span> <span class="br0">&#91;</span>
        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;a&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column A&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;b&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column B&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span>key<span class="sy0">:</span><span class="st0">&quot;c&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span><span class="st0">&quot;Column C&quot;</span><span class="br0">&#125;</span>
    <span class="br0">&#93;</span><span class="sy0">,</span>
&nbsp;
	myRecordset <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Recordset</span><span class="br0">&#40;</span><span class="br0">&#123;</span>records<span class="sy0">:</span>data<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
	myRecordset.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">RecordsetSort</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	myRecordset.<span class="me1">sort</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'sort'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
		Y.<span class="me1">log</span><span class="br0">&#40;</span><span class="st0">'this recordset is about to be sorted'</span><span class="br0">&#41;</span><span class="sy0">;</span>
	<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	myRecordset.<span class="me1">sort</span>.<span class="me1">sort</span><span class="br0">&#40;</span><span class="st0">'a'</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-0771fcb2421d2259b816f476e1403096-plain">YUI().use("recordset-base", "recordset-sort", function(Y) {
    var data = [
        {key:"a", label:"Column A"},
        {key:"b", label:"Column B"},
        {key:"c", label:"Column C"}
    ],
	
	myRecordset = new Y.Recordset({records:data});
	myRecordset.plug(Y.Plugin.RecordsetSort);
	
	myRecordset.sort.on('sort', function(e) {
		Y.log('this recordset is about to be sorted');
	});
	
	myRecordset.sort.sort('a', true);
	
});</textarea></div>				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Recordset Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../recordset/recordset_basic.html'>Basic Recordset</a></li><li><a href='../recordset/recordset_filter.html'>Recordset Filter Plugin</a></li><li><a href='../recordset/recordset_indexer.html'>Recordset Indexer Plugin</a></li><li class='selected'><a href='../recordset/recordset_sort.html'>Recordset Sort Plugin</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More Recordset Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/recordset/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_recordset.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = { filter: 'raw' };
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
